<script setup lang="ts">
import MdiChevronRight from '~icons/mdi/chevron-right';
import MdiFileAlert from '~icons/mdi/file-alert';
import { Button } from '@/components/ui/button'; // Fixed import

interface Props {
  backups: string[];
}

const props = withDefaults(defineProps<Props>(), {
  backups: () => []
});
const emit = defineEmits(['close', 'select']);

function selectBackup(backup: string) {
  emit('select', backup);
  emit('close');
}

function cancel() {
  emit('close');
}
</script>

<template>
  <div class="p-6">
    <div v-if="!backups || backups.length === 0" class="text-center py-8 text-gray-500">
      <MdiFileAlert class="w-12 h-12 mx-auto mb-2 text-gray-400" />
      <p>{{ $t('tools.sqldump.no_backup_files') }}</p>
    </div>
    <div v-else class="space-y-4">
      <div class="text-sm text-gray-600 mb-2">{{ $t('tools.sqldump.found_backup_files', { count: backups.length }) }}</div>
      <div v-for="backup in backups" :key="backup"
           class="flex items-center justify-between p-3 border rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 cursor-pointer transition-colors"
           @click="selectBackup(backup)">
        <div>
          <div class="font-medium text-gray-900 dark:text-gray-100">{{ backup }}</div>
          <div class="text-sm text-gray-500 dark:text-gray-400">{{ $t('tools.sqldump.backup_file') }}</div>
        </div>
        <MdiChevronRight class="text-gray-400 dark:text-gray-500" />
      </div>
    </div>
    <div class="flex justify-end mt-6 space-x-2">
      <Button type="button" variant="outline" @click="cancel">
        {{ $t('global.cancel') }}
      </Button>
    </div>
  </div>
</template>